<template>
  <layout>
    <Row  >
      <Col span="24" >
        <Card  dis-hover>
          <p>培训回执年度统计</p>
          <div id="statistics" class="companyEcharts"></div>
        </Card>
      </Col>
    </Row>
    <Row  style="margin-top: 10px" :gutter="8">
      <Col span="12" >
        <Card  dis-hover>
          <p>培训人数统计</p>
          <div id="peopleCount" class="companyEcharts"></div>
        </Card>
      </Col>
      <Col span="12" >
        <Card  dis-hover>
          <p>培训次数统计</p>
          <div id="secondCount" class="companyEcharts"></div>
        </Card>
      </Col>
    </Row>




    <Table ref='table' :height='this.Common.tableHeightNum' :loading="loading" size="small" class="no-add-table"
           no-data-text="没有查询到相关数据!"
           highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
    </Table>


  </layout>
</template>

<script>
import {
  Api
} from '../../../api/index.js'
import echarts from 'echarts';
export default {
  name: "trainStatiscs",
  data(){
    return{
      loading:false,
      dataTable: [],
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index+1);
          }
        },
        {
          minWidth: 200,
          title: '年份',
          align: 'center',
          key: 'year',
          render: (h, params) => {
            return h('span', params.row.year + '年');
          }
        },
        {
          minWidth: 200,
          title: '月份',
          align: 'center',
          key: 'month',
          render: (h, params) => {
            return h('span', params.row.month + '月');
          }
        },
        {
          minWidth: 200,
          title: '培训次数',
          align: 'center',
          key: 'secondCount',
        },
        {
          minWidth: 200,
          title: '培训人数',
          align: 'center',
          key: 'peopleCount',
        },
      ],
      statistics: {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['培训人数', '培训次数']
        },
        color:['#FD5C50','#FF9800', '#FDD835', '#40C4FF', '#FF3E80','#42A5F5', '#FFC310', '#1DE9B6','#6666CC','#66CC66'],
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: ['2012', '2013']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '培训人数',
            type: 'bar',

            emphasis: {
              focus: 'series'
            },
            data: [320, 332]
          },
          {
            name: '培训次数',
            type: 'bar',

            emphasis: {
              focus: 'series'
            },
            data: [220, 182]
          },

        ]
      },
      peopleCount: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color:[ '#FDD835', '#40C4FF', '#FF3E80','#42A5F5', '#FFC310', '#1DE9B6','#6666CC','#66CC66'],
        legend: {
          data: ['2020', '2021']
        },

        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '2020',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '2021',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },

        ]
      },
      secondCount: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color:[  '#FF3E80','#42A5F5', '#FFC310', '#1DE9B6','#6666CC','#66CC66'],
        legend: {
          data: ['2020', '2021']
        },

        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '2020',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '2021',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },

        ]
      },

    }
  },
  mounted(){
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.query();

  },
  methods:{
    query(){
      this.statisticsQuery();
      this.peopleQuery();
      this.secondQuery();
      this.queryTable();
    },
    statisticsQuery(){
      let _this = this;
      let chart = echarts.init(document.getElementById('statistics'));
      let url = Api.receiptYearStatistics;
      this.$http.get(url).then((res) => {
        let data = res.data.data
        _this.statistics.xAxis[0].data = data.year;
        _this.statistics.series[0].data = data.peopleCount;
        _this.statistics.series[1].data = data.secoundCount;
        chart.setOption(_this.statistics);
        window.onresize = chart.resize;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    peopleQuery(){
      let _this = this;
      let chart = echarts.init(document.getElementById('peopleCount'));
      let url = Api.receiptPeopleMonthStatistics;
      this.$http.get(url).then((res) => {
        let data = res.data.data
        _this.peopleCount.legend.data = data.years;
        _this.peopleCount.series = [];
        data.data.forEach(item =>{
          item.smooth= true
          _this.peopleCount.series.push(item);

        })
        chart.setOption(_this.peopleCount);
        window.onresize = chart.resize;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    secondQuery(){
      let _this = this;
      let chart = echarts.init(document.getElementById('secondCount'));
      let url = Api.receiptSecondMonthStatistics;
      this.$http.get(url).then((res) => {
        let data = res.data.data
        _this.secondCount.legend.data = data.years;
        _this.secondCount.series = [];
        data.data.forEach(item =>{
          item.smooth= true
          _this.secondCount.series.push(item);

        })
        chart.setOption(_this.secondCount);
        window.onresize = chart.resize;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    queryTable(){
      let _this = this;
      _this.loading = true;
      let url = Api.receiptTrainStatistics;
      this.$http.get(url).then((res) => {
        _this.dataTable = res.data.data;
        _this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    }


  },
}
</script>

<style scoped>
@import '../../../index.css';
/deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
.companyEcharts {
  height: 300px;
  text-align:center
}
</style>
